<template>
  <div class="nav">
    <el-container>
      <el-header>
        <div class="contain">
          <el-row>
            <el-col :span="24"
              ><el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                router
              >
                <el-menu-item index="/home" :route="{ path: '/home' }"
                  >首页</el-menu-item
                >
                <el-menu-item index="/fenlei" :route="{ path: '/fenlei' }"
                  >全部商品</el-menu-item
                >
                <el-menu-item index="/orders">我的订单</el-menu-item>
                <div class="nav-right">
                  <el-menu-item index="/wait">我的出售</el-menu-item>
                  <el-menu-item index="/cart">我的收藏</el-menu-item>
                  <el-menu-item :index="state.user ? '/mine' : '/login'">{{
                    state.user._id ? state.user.nickName : "登录"
                  }}</el-menu-item>
                </div>
              </el-menu></el-col
            >
          </el-row>
        </div>
      </el-header>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  data() {
    return {
      state: this.$store.state,
      activeIndex: "/home",
      activeIndex2: "/home",
    };
  },
  computed: {},
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
  created() {},
};
</script>
<style scoped>
.nav {
  /* height: 100%; */
  line-height: 0;
}
.el-header {
  padding: 0;
  background-color: #545c64;
  width: 100%;
}

.nav-right {
  display: flex;
  justify-content: end;
}
.nav-right > li {
  height: 58px;
}
.el-menu--horizontal .el-menu-item a,
.el-menu--horizontal .el-menu-item a:hover {
  color: inherit;
}
.el-menu--horizontal .el-menu-item.is-active {
  border-bottom: 2px solid #409eff;
  color: #303133;
}
</style>